import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';
import { TextField, Row, Col, Button, ButtonGroup } from '@folio/stripes/components';
import {  IfPermission } from '@folio/stripes/core';
class SearchForm extends Component {
  constructor(props) {
    super(props);
  }

    static propTypes = {
      handleSubmit: PropTypes.func.isRequired,
      initialValues: PropTypes.object,
      dictionary: PropTypes.object,
      cleanSearch: PropTypes.func,
      intl: PropTypes.func
    };

    fieldChange = () => {
      const { handleSubmit } = this.props;
      this.setState(() => {
        handleSubmit();
      });
    };

    render() {
      const {
        handleSubmit,
          intl
      } = this.props;

      return (
        <div>
          <form data-test-form-page id="form-search" onSubmit={handleSubmit}>
            <Row style={{ width: '100%' }}>
              <Col xs={4}>
                <Field
                  component={TextField}
                  name="name"
                  placeholder={intl.formatMessage({id:"ui-party.other.category.name"})}
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col>

              <Col xs={3}>
                <ButtonGroup>
                  <Button type="submit">
                      <FormattedMessage id="ui-party.search" />
                    </Button>
                  <IfPermission perm={"ui-party.property.manage.view.add"}>
                    <Button onClick={() => this.props.toModel('/party/property/add')}>
                      <FormattedMessage id="ui-party.add" />
                    </Button>
                  </IfPermission>

                </ButtonGroup>
              </Col>
            </Row>
          </form>
        </div>
      );
    }
}

export default injectIntl(
  reduxForm({
    form:   'classifySearchFrom',
    navigationCheck: true,
    enableReinitialize: true
  })(SearchForm)
);
